<template>
  <Modal
    width="580"
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    title="查看模板信息"
  >
    <div class="modal-main" v-if="info">
      <div class="flx-row-s-c">
        <span class="title c-black f-14">用户类型</span>
        <span class="content c-black f-14">{{
          info.type == 0 ? "个人" : "企业"
        }}</span>
      </div>
      <template v-if="info.type == 1">
        <div class="flx-row-s-c">
          <span class="title c-black f-14">企业名称（中文）</span>
          <span class="content c-black f-14">{{ info.locBusinessName }}</span>
        </div>
        <div class="flx-row-s-c">
          <span class="title c-black f-14">企业名称（英文）</span>
          <span class="content c-black f-14">{{ info.intBusinessName }}</span>
        </div>
      </template>
      <div class="flx-row-s-c">
        <span class="title c-black f-14">域名所有者（中文）</span>
        <span class="content c-black f-14">{{
          info.type == 0 ? info.locName : info.locBusinessName
        }}</span>
      </div>
      <div class="flx-row-s-c">
        <span class="title c-black f-14">域名所有者（英文）</span>
        <span class="content c-black f-14">{{
          info.type == 0 ? info.intName : info.intBusinessName
        }}</span>
      </div>
      <div class="flx-row-s-c">
        <span class="title c-black f-14">联系人（中文）</span>
        <span class="content c-black f-14">{{ info.locName }}</span>
      </div>
      <div class="flx-row-s-c">
        <span class="title c-black f-14">联系人（英文）</span>
        <span class="content c-black f-14">{{ info.intName }}</span>
      </div>
      <div class="flx-row-s-c">
        <span class="title c-black f-14">电子邮箱</span>
        <span class="content c-black f-14">{{ info.email }}</span>
      </div>
      <div class="flx-row-s-c">
        <span class="title c-black f-14">地区</span>
        <span class="content c-black f-14">{{
          `${info.country ? info.country + ", " : ""}${
            info.locSp ? info.locSp + ", " : ""
          }${info.locCity ? info.locCity + ", " : ""}${
            info.locStreet ? info.locStreet : ""
          }`
        }}</span>
      </div>
      <div class="flx-row-s-s">
        <span class="title c-black f-14">通信地址（中文）</span>
        <span class="content c-black f-14">{{ info.locStreet2 }}</span>
      </div>
      <div class="flx-row-s-c">
        <span class="title c-black f-14">邮编</span>
        <span class="content c-black f-14">{{ info.pc }}</span>
      </div>
      <div class="flx-row-s-c">
        <span class="title c-black f-14">手机</span>
        <span class="content c-black f-14">{{ info.voice }}</span>
      </div>
    </div>
  </Modal>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    info: {
      default: () => {},
    },
  },
  watch: {
    info: {
      deep: true,
      handler: (newValue) => {
        console.log(newValue);
      },
    },
  },
  methods: {
    cancel() {
      this.config = false;
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-main {
  padding: 30px 40px 50px;
  max-height: 500px;
  overflow-x: auto;

  .title {
    width: 150px;
    text-align: right;
    margin-right: 10px;
    flex-shrink: 0;

    &::after {
      content: ":";
    }
  }
  .content {
    width: 100%;
  }
}
.modal-main > div {
  margin: 8px;
}
</style>